<script lang="ts" setup>
import { ref, reactive, onMounted, defineProps } from 'vue'
const a = ref({
    name: 'join'
})
const b = reactive({
    name: 'join'
})
const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event)
}
// tab按钮的位置在哪个位置
const tabPosition = ref('left')
const user = ref({
    user: {
        name: "Lucy",
        address: "上海市静安区",
        phone: 12345678901,
    }
})
const msg = ref('hello world')
defineProps(['item'])
</script>
<template>
    <!--  type = card 设置具有卡片风格的标签。 -->
    <!-- type = border-card 设置标签页为带有边框的卡片 -->
    <!-- :tab-position = 响应变量 tabPosition="left|right|top|bottom" -->
    <el-tabs :tab-position="tabPosition" type="card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="User" name="first">User</el-tab-pane>
        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <calendar />
                    </el-icon>
                    <span>Route</span>
                </span>
            </template>

        </el-tab-pane>
        <div>
            <slot name="zuoyongyu" :info="user" :message="msg">
                {{ item }}
            </slot>
        </div>

    </el-tabs>
    {{ item }}
</template>



<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>